import Cookies from 'js-cookie';
<template>
  <div class="jfkmx">
    <van-nav-bar title="加扣分明细" left-text="" left-arrow @click-left="goBack"></van-nav-bar>
    <!-- <p class="descript-title">加扣分明细</p> -->
    <van-form @submit="onSubmit" class="margin-top-12" :show-error-message="false">
      <van-field
        clickable
        readonly
        name="scoreType"
        :value="formParams.scoreType"
        label="类型"
        placeholder="点击选择类型"
        :rules="[{ required: true, message: '请选择类型' }]"
        required
        @click="showPickerlx = true"
      />
      <van-field
        clickable
        readonly
        name="scoreItem"
        :value="formParams.scoreItem"
        label="加分细则"
        placeholder="点击选择加分细则"
        :rules="[{ required: true, message: '请选择加分细则' }]"
        required
        @click="showPickerJfxz = true"
      />
      <van-field
        v-model="formParams.scoreRemark"
        rows="3"
        autosize
        label="加分说明"
        type="textarea"
        placeholder="请输入加分说明"
        name="scoreRemark"
        :rules="[{ required: true, message: '请输入加分说明' }]"
      />
      <van-field
        v-model="formParams.score"
        name="score"
        label="分值"
        placeholder="请输入分值"
        :rules="[{ required: true, message: '请输入分值' }]"
        required
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <!-- pop自定义 -->
    <van-popup v-model="showPickerlx" position="bottom">
      <van-picker
        title="类型"
        show-toolbar
        :columns="jkflxList"
        @confirm="onConfirmJkflx"
        @cancel="showPickerlx = false"
        :default-index="0"
      />
    </van-popup>
    <van-popup v-model="showPickerJfxz" position="bottom">
      <van-picker
        title="加分细则"
        show-toolbar
        value-key="label"
        :columns="jkfxzList"
        @confirm="onConfirmJkxz"
        @cancel="showPickerJfxz = false"
        :default-index="0"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'jkfxm',
  dicts: ['ptsj_score_plus', 'ptsj_score_redution'],
  data() {
    return {
      formParams: {
        scoreType: '',
        scoreItem: '',
        scoreRemark: '',
        score: ''
      },
      jkflxList: [{ text: '加分', value: '1' }, { text: '扣分', value: '2' }],
      jkfxzList: [],
      showPickerlx: false,
      showPickerJfxz: false
    }
  },
  mounted() {

  },
  methods: {
    onConfirmJkflx(row, index) {
      if(row.text !== this.formParams.scoreType) {
        this.formParams.scoreItem = '';
      }
      this.formParams.scoreType = row.text;
      this.showPickerlx = false;
      if(row.text == '加分') {
        this.jkfxzList = this.dict.type.ptsj_score_plus
      } else if(row.text == '扣分'){
        this.jkfxzList = this.dict.type.ptsj_score_redution
      } else {
        this.jkfxzList = []
      }
    },
    onConfirmJkxz(row, index) {
      this.formParams.scoreItem = row.label;
      this.showPickerJfxz = false;
    },
    onSubmit(values) {
      console.log(values)
      if(values) {
        this.$store.commit('SET_JKFMXLIST', values);
        this.$router.back(-1)
      }
    },
    // 返回上页
    goBack() {
      this.$router.back(-1);
    }
  }
}
</script>

<style lang="less" scoped>
.jfkmx {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: #F5F5F5;
  .margin-top-12 {
    margin-top: 12px;
  }
  /deep/ .van-cell__title {
    text-align: left;
  }
  /deep/ .van-field {
    display: block;
    .van-field__label {
      font-size: 13px;
      width: 90%;
    }
  }
  .descript-title {
    background-color: #Fff;
    color: #666666;
    font-size: 12px;
    padding: 16px;
    text-align: left;
  }
}
</style>